<template>
  <div id="my-order">
    <!-- 头部栏位 -->
    <!--页面顶部-->
    <div id="nav-bottom">
      <!--顶部-->
      <div class="nav-top">
        <div class="top">
          <div class="py-container">
            <div class="shortcut">
              <ul class="fl">
                <li class="f-item">青橙欢迎您！</li>
                <li class="f-item">
                  请<a href="login.html" target="_blank">登录</a><span><a href="register.html" target="_blank">免费注册</a></span>
                </li>
              </ul>
              <div class="fr typelist">
                <ul class="types">
                  <li class="f-item"><span>我的订单</span></li>

                  <li class="f-item">
                    <span><a href="cart.html" target="_blank">我的购物车</a></span>
                  </li>
                  <li class="f-item">
                    <span><a href="home.html" target="_blank">我的青橙</a></span>
                  </li>
                  <li class="f-item"><span>青橙会员</span></li>
                  <li class="f-item"><span>企业采购</span></li>
                  <li class="f-item"><span>关注青橙</span></li>
                  <li class="f-item">
                    <span><a href="cooperation.html" target="_blank">合作招商</a></span>
                  </li>
                  <li class="f-item">
                    <span><a href="shoplogin.html" target="_blank">商家后台</a></span>
                  </li>
                  <li class="f-item"><span>网站导航</span></li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!--头部-->
        <div class="header">
          <div class="py-container">
            <div class="yui3-g Logo">
              <div class="yui3-u Left logoArea">
                <a class="logo-bd" title="青橙" href="index.html" target="_blank"></a>
              </div>
              <div class="yui3-u Rit searchArea">
                <div class="search">
                  <form action="" class="sui-form form-inline">
                    <!--searchAutoComplete-->
                    <div class="input-append">
                      <input type="text" id="autocomplete" class="input-error input-xxlarge" />
                      <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--header-->
    <div id="account">
      <div class="py-container">
        <div class="yui3-g home">
          <!--左侧列表-->
          <div class="yui3-u-1-6 list">
            <dl>
              <dt><i>·</i> 订单中心</dt>
              <dd>我的订单</dd>
              <dd>团购订单</dd>
              <dd>本地生活订单</dd>
              <dd>我的预售</dd>
              <dd>评价晒单</dd>
              <dd>取消订单记录</dd>
            </dl>
            <dl>
              <dt><i>·</i> 关注中心</dt>
              <dd>关注的商品</dd>
              <dd>关注的店铺</dd>
              <dd>关注的专辑</dd>
              <dd>关注的品牌</dd>
              <dd>关注的活动</dd>
              <dd>浏览历史</dd>
            </dl>
            <dl>
              <dt><i>·</i> 特色业务</dt>
              <dd>我的营业厅</dd>
              <dd>京东通信</dd>
              <dd>定期送</dd>
              <dd>京东代下单</dd>
              <dd>我的回收单</dd>
              <dd>节能补贴</dd>
              <dd>医药服务</dd>
              <dd>流量加油站</dd>
              <dd>黄金托管</dd>
            </dl>
            <dl>
              <dt><i>·</i> 客户服务</dt>
              <dd>返修退换货</dd>
              <dd>价格保护</dd>
              <dd>意见建议</dd>
              <dd>购买咨询</dd>
              <dd>交易纠纷</dd>
              <dd>我的发票</dd>
            </dl>
            <dl>
              <dt><i>·</i> 设置</dt>
              <dd>个人信息</dd>
              <dd>收货地址</dd>
            </dl>
          </div>
          <!--右侧主内容-->
          <div class="yui3-u-5-6 body">
            <div class="order">
              <div class="mt">
                <span class="fl"><strong>我的订单</strong></span>
              </div>
            </div>

            <div class="order-detail">
              <div class="ever">
                <ul class="sui-nav nav-tabs">
                  <li class="active">
                    <a href="#all" data-toggle="tab">全部订单<i class="mark">5</i></a>
                  </li>
                  <li>
                    <a href="#pay" data-toggle="tab">待付款<i class="mark">2</i></a>
                  </li>
                  <li>
                    <a href="#receive" data-toggle="tab">待收货<i class="mark">1</i></a>
                  </li>
                  <li>
                    <a href="#remark" data-toggle="tab">待评价<i class="mark">2</i></a>
                  </li>
                </ul>
                <div class="clearfix"></div>

                <div class="tab-content">
                  <div class="chosetype">
                    <table class="sui-table table-bordered-simple">
                        <thead>
                          <tr>
                            <th width="29%">
                              <span class="sui-dropdown dropdown-bordered"
                                ><span class="dropdown-inner">
                                  <a role="button" href="javascript:void(0);" data-toggle="dropdown" data-trigger="hover" class="dropdown-toggle"
                                    >近三个月订单 <i class="arrow"> <img src="img/barrow.png"/></i
                                  ></a>
                                  <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
                                    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">近三个月订单</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2016年订单</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2015年订单</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2014年订单</a></li>
                                  </ul>
                                </span></span
                              >
                            </th>
                            <th width="31%">订单详情</th>
                            <th width="13%">收货人</th>
                            <th>金额</th>
                            <th>
                              <span class="sui-dropdown dropdown-bordered"
                                ><span class="dropdown-inner">
                                  <a role="button" href="javascript:void(0);" data-toggle="dropdown" data-trigger="hover" class="dropdown-toggle"
                                    >全部状态 <i class="arrow"> <img src="img/barrow.png"/></i
                                  ></a>
                                  <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
                                    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">全部状态</a></li>

                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">等待付款</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">等待收货</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">已完成</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">已取消</a></li>
                                  </ul>
                                </span></span
                              >
                            </th>
                            <th>操作</th>
                          </tr>
                        </thead>
                    </table>
                  </div>
                  <div id="all" class="tab-pane active">
                    <div class="orders">
                      <table class="sui-table table-bordered">
                        <thead>
                          <tr>
                            <th colspan="5">
                              <span class="ordertitle"
                                >2017-02-11 11:59&nbsp;订单编号：7867473872181848 <span class="pull-right delete"><img src="img/delete.png"/></span
                              ></span>
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td width="60%">
                              <div class="typographic">
                                <img src="img/goods.png" /> <a href="#" class="block-text">包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款</a><span>x1</span>
                                <ul class="unstyled list-inline">
                                  <li>申请售后</li>
                                </ul>
                              </div>
                            </td>
                            <td rowspan="2" width="8%" class="center">小丽</td>
                            <td rowspan="2" width="13%" class="center">
                              <ul class="unstyled">
                                <li>总金额¥138.00</li>
                                <li>在线支付</li>
                              </ul>
                            </td>
                            <td rowspan="2" width="8%" class="center">
                              <a href="#" class="btn">已完成 </a>
                            </td>
                            <td rowspan="2" width="13%" class="center">
                              <ul class="unstyled">
                                <li>
                                  <a href="mycomment.html" target="_blank">评价|晒单</a>
                                </li>
                              </ul>
                            </td>
                          </tr>
                          <tr>
                            <td width="50%">
                              <div class="typographic">
                                <img src="img/goods.png" /> <a href="#" class="block-text">包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款</a><span>x1</span>
                                <ul class="unstyled">
                                  <li>申请售后</li>
                                </ul>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>

                      <table class="sui-table table-bordered">
                        <thead>
                          <tr>
                            <th colspan="5">
                              <span class="ordertitle"
                                ><i id="order-time">2017-03-11 12:59</i>订单编号：<i id="order-num">7867473872555</i> <span class="pull-right delete"><img src="img/delete.png"/></span
                              ></span>
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td width="60%">
                              <div class="typographic">
                                <img src="img/goods.png" /> <a href="#" class="block-text">包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款</a><span>x1</span>
                                <ul class="unstyled list-inline">
                                  <li>申请售后</li>
                                </ul>
                              </div>
                            </td>
                            <td rowspan="2" width="8%" class="center">小丽</td>
                            <td rowspan="2" width="13%" class="center">
                              <ul class="unstyled">
                                <li>总金额¥138.00</li>
                                <li>在线支付</li>
                              </ul>
                            </td>
                            <td rowspan="2" width="8%" class="center">
                              <a href="#" class="btn">已完成 </a>
                            </td>
                            <td rowspan="2" width="13%" class="center">
                              <ul class="unstyled">
                                <li>
                                  <a href="mycomment.html" target="_blank">评价|晒单</a>
                                </li>
                              </ul>
                            </td>
                          </tr>
                          <tr>
                            <td width="50%">
                              <div class="typographic">
                                <img src="img/goods.png" /> <a href="#" class="block-text">包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款</a><span>x1</span>
                                <ul class="unstyled">
                                  <li>申请售后</li>
                                </ul>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>

                  <div id="pay" class="tab-pane">
                    <p>待付款</p>
                  </div>
                  <div id="receive" class="tab-pane">
                    <p>待收货</p>
                  </div>
                  <div id="remark" class="tab-pane">
                    <p>待评价</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="order">
              <div class="mt">
                <span class="fl"><strong>猜你喜欢</strong></span>
              </div>
            </div>
            <div class="like-list">
              <ul class="yui3-g">
                <li class="yui3-u-1-4">
                  <div class="list-wrap">
                    <div class="p-img">
                      <img src="img/_/itemlike01.png" />
                    </div>
                    <div class="attr">
                      <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                    </div>
                    <div class="price">
                      <strong>
                        <em>¥</em>
                        <i>3699.00</i>
                      </strong>
                    </div>
                    <div class="commit">
                      <i class="command">已有6人评价</i>
                    </div>
                  </div>
                </li>
                <li class="yui3-u-1-4">
                  <div class="list-wrap">
                    <div class="p-img">
                      <img src="img/_/itemlike02.png" />
                    </div>
                    <div class="attr">
                      <em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
                    </div>
                    <div class="price">
                      <strong>
                        <em>¥</em>
                        <i>4388.00</i>
                      </strong>
                    </div>
                    <div class="commit">
                      <i class="command">已有700人评价</i>
                    </div>
                  </div>
                </li>
                <li class="yui3-u-1-4">
                  <div class="list-wrap">
                    <div class="p-img">
                      <img src="img/_/itemlike03.png" />
                    </div>
                    <div class="attr">
                      <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                    </div>
                    <div class="price">
                      <strong>
                        <em>¥</em>
                        <i>4088.00</i>
                      </strong>
                    </div>
                    <div class="commit">
                      <i class="command">已有700人评价</i>
                    </div>
                  </div>
                </li>
                <li class="yui3-u-1-4">
                  <div class="list-wrap">
                    <div class="p-img">
                      <img src="img/_/itemlike04.png" />
                    </div>
                    <div class="attr">
                      <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                    </div>
                    <div class="price">
                      <strong>
                        <em>¥</em>
                        <i>4088.00</i>
                      </strong>
                    </div>
                    <div class="commit">
                      <i class="command">已有700人评价</i>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部栏位 -->
    <!--页面底部-->
    <div class="clearfix footer">
      <div class="py-container">
        <div class="footlink">
          <div class="Mod-service">
            <ul class="Mod-Service-list">
              <li class="grid-service-item intro  intro1">
                <i class="serivce-item fl"></i>
                <div class="service-text">
                  <h4>正品保障</h4>
                  <p>正品保障，提供发票</p>
                </div>
              </li>
              <li class="grid-service-item  intro intro2">
                <i class="serivce-item fl"></i>
                <div class="service-text">
                  <h4>正品保障</h4>
                  <p>正品保障，提供发票</p>
                </div>
              </li>
              <li class="grid-service-item intro  intro3">
                <i class="serivce-item fl"></i>
                <div class="service-text">
                  <h4>正品保障</h4>
                  <p>正品保障，提供发票</p>
                </div>
              </li>
              <li class="grid-service-item  intro intro4">
                <i class="serivce-item fl"></i>
                <div class="service-text">
                  <h4>正品保障</h4>
                  <p>正品保障，提供发票</p>
                </div>
              </li>
              <li class="grid-service-item intro intro5">
                <i class="serivce-item fl"></i>
                <div class="service-text">
                  <h4>正品保障</h4>
                  <p>正品保障，提供发票</p>
                </div>
              </li>
            </ul>
          </div>
          <div class="clearfix Mod-list">
            <div class="yui3-g">
              <div class="yui3-u-1-6">
                <h4>购物指南</h4>
                <ul class="unstyled">
                  <li>购物流程</li>
                  <li>会员介绍</li>
                  <li>生活旅行/团购</li>
                  <li>常见问题</li>
                  <li>购物指南</li>
                </ul>
              </div>
              <div class="yui3-u-1-6">
                <h4>配送方式</h4>
                <ul class="unstyled">
                  <li>上门自提</li>
                  <li>211限时达</li>
                  <li>配送服务查询</li>
                  <li>配送费收取标准</li>
                  <li>海外配送</li>
                </ul>
              </div>
              <div class="yui3-u-1-6">
                <h4>支付方式</h4>
                <ul class="unstyled">
                  <li>货到付款</li>
                  <li>在线支付</li>
                  <li>分期付款</li>
                  <li>邮局汇款</li>
                  <li>公司转账</li>
                </ul>
              </div>
              <div class="yui3-u-1-6">
                <h4>售后服务</h4>
                <ul class="unstyled">
                  <li>售后政策</li>
                  <li>价格保护</li>
                  <li>退款说明</li>
                  <li>返修/退换货</li>
                  <li>取消订单</li>
                </ul>
              </div>
              <div class="yui3-u-1-6">
                <h4>特色服务</h4>
                <ul class="unstyled">
                  <li>夺宝岛</li>
                  <li>DIY装机</li>
                  <li>延保服务</li>
                  <li>品优购E卡</li>
                  <li>品优购通信</li>
                </ul>
              </div>
              <div class="yui3-u-1-6">
                <h4>帮助中心</h4>
                <img src="img/wx_cz.jpg" />
              </div>
            </div>
          </div>
          <div class="Mod-copyright">
            <ul class="helpLink">
              <li>关于我们<span class="space"></span></li>
              <li>联系我们<span class="space"></span></li>
              <li>关于我们<span class="space"></span></li>
              <li>商家入驻<span class="space"></span></li>
              <li>营销中心<span class="space"></span></li>
              <li>友情链接<span class="space"></span></li>
              <li>关于我们<span class="space"></span></li>
              <li>营销中心<span class="space"></span></li>
              <li>友情链接<span class="space"></span></li>
              <li>关于我们</li>
            </ul>
            <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</p>
            <p>京ICP备08001421号京公网安备110108007702</p>
          </div>
        </div>
      </div>
    </div>
    <!--页面底部END-->
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {},
  created() {}
}
</script>

<style lang="less">
a {
  color: #666;
}
#my-order {
  seckillOrderseckillOrder input {
    *display: inline;
    *zoom: 1;
  }

  .home {
    padding: 10px;
    color: #333;
  }

  .list dl {
    margin: 0;
  }

  .list dt,
  dd {
    line-height: 28px;
  }

  .list dt {
    font-weight: 700;
    padding: 5px;
  }

  .list dt i {
    color: #77b72c;
  }

  .list dd {
    margin: 0 0 6px;
    border-bottom: 1px solid #ededed;
    text-align: center;
  }

  .body {
    color: #666;
  }

  .body .order,
  .body .discount {
    border: 1px solid #ddd;
    margin: 0 20px 12px;
  }

  .body .ever {
    margin: 20px;
  }

  .order .mt {
    overflow: hidden;
    padding: 12px 10px;
    background-color: #f1f1f1;
    font-size: 15px;
  }

  .order .order-detail {
    padding: 10px;
    text-align: center;
  }

  .order-detail .none {
    color: #666;
    font-size: 16px;
  }

  .order-detail .orders {
    padding: 10px 0;
  }

  .orders .delete {
    cursor: pointer;
  }

  .list1,
  .list2,
  .list3,
  .list4 {
    position: relative;
  }

  .list1 i {
    background-position: -526px -73px;
  }

  .list2 i {
    background-position: -526px -104px;
  }

  .list3 i {
    background-position: -526px -132px;
  }

  .list4 i {
    background-position: -526px -163px;
  }

  .td ul li {
    list-style-type: none;
    width: 45%;
    height: 80px;
    text-align: center;
    line-height: 26px;
  }

  .td ul li div {
    background-image: url(../../public/img/icons.png);
    width: 50px;
    height: 50px;
    position: absolute;
  }

  .td {
    width: 200px;
    margin: 0 auto;
    padding: 0 20px;
    display: inline-block;
    position: relative;
  }

  .td span {
    color: #999;
  }

  .td .td1 {
    background-position: -314px -7px;
    position: absolute;
    top: 25px;
    left: 40px;
  }

  .td .td2 {
    background-position: -319px -54px;
    position: absolute;
    top: 25px;
    right: 53px;
  }

  .td .td3 {
    background-position: -319px -97px;
    position: absolute;
    top: 109px;
    left: 46px;
  }

  .td .td4 {
    background-position: -319px -143px;
    position: absolute;
    top: 107px;
    right: 54px;
  }

  .space {
    background-color: #ddd;
  }

  .space-x {
    width: 178px;
    height: 0;
    position: absolute;
    top: 80px;
    left: 11px;
    border-bottom: 1px solid #ddd;
  }

  .space-y {
    height: 159px;
    position: absolute;
    top: 2px;
    left: 105px;
    border-right: 1px solid #ddd;
  }

  .minus,
  .change {
    border-right: 1px solid #ddd;
    margin-right: -1px;
  }

  .title {
    padding: 20px 10px 10px;
    color: #666;
  }

  .carousel-control {
    left: 0;
    top: 47%;
    border: 0;
    background: #c3c3c3;
    width: 20px;
    border-radius: 0;
  }

  .carousel-inner > .item > img {
    width: 238px;
    margin: 0 auto;
  }

  .jifen {
    overflow: hidden;
    padding: 10px;
    margin: 5px 0;
  }

  .jifen .fr {
    width: 185px;
  }

  .fen {
    line-height: 28px;
  }

  .fen i {
    color: red;
  }

  .dui {
    padding-right: 10px;
  }

  .chong {
    margin-top: 10px;
  }

  .sui-form.form-horizontal .control-group {
    margin-bottom: 9px;
    *margin-bottom: 11px;
    *padding-bottom: 11px;
  }

  .control-group .control-label {
    float: left;
    width: 96px;
    ooverflow: hidden;
  }

  .control-group .controls {
    float: left;
    width: 139px;
  }

  .ever .tab-content {
    border: 0;
    border-top: 0;
  }

  .tab-content .chosetype {
    margin-top: 10px;
  }

  .sui-nav.nav-tabs {
    background: #f1f1f1;
    padding-left: 0;
    border: 1px solid #ddd;
    margin: 0;
    overflow: hidden;
  }

  .sui-nav.nav-tabs > li > a {
    border: 0;
    padding: 10px 20px;
    font-family: '微软雅黑';
  }

  .sui-nav.nav-tabs > li > a .mark {
    vertical-align: super;
    background: #ff713f;
    color: #f7f1f1;
    padding: 0 5px 2px;
    border-radius: 8px;
  }

  .sui-nav.nav-tabs > .active > a,
  .sui-nav.nav-tabs > li > a:hover {
    background-color: #ff713f;
    color: #fff;
    border-radius: 0;
    border: 0;
  }

  .sui-nav.nav-tabs > li > a:hover {
    background-color: #ff713f !important;
  }

  .sui-nav.nav-tabs > li + li {
    margin-left: 2px;
  }

  .sui-nav.nav-tabs > .active > a .mark {
    background-color: #ececec;
    color: #333;
  }

  .like-list {
    padding: 20px;
    color: #666;
    margin: -12px 20px 20px;
    border: 1px solid #ddd;
    border-top: 0;
  }

  .like-list ul li .attr,
  .like-list ul li .price,
  .like-list ul li .commit {
    padding-left: 15px;
  }

  .like-list ul li .attr {
    padding-bottom: 10px;
  }

  .list-wrap .price {
    font: 16px '微软雅黑';
    color: #e4393c;
  }

  .like-list ul li .list-wrap {
    line-height: 22px;
  }
}
</style>
